<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>新闻中心</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/common.css">
    <link rel="stylesheet" href="../../style/home/article.css">
    <link rel="stylesheet" href="../../style/investigation/investigation.css">

    <script src="../../libs/vue.js"></script>
	<script src="../../jsc/vue-router.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="../../jsc/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
    <script src="../../libs/node_modules/echarts/dist/echarts.js"></script>
    <!--<script src="js/system.js"></script>-->
</head>
<body>

<main id="survey" v-cloak>
    <header-component ></header-component>
    <navsearch-component></navsearch-component>

	<!-- 主站导航 -->
    <navrow-component v-if="sitelevel == ''"></navrow-component>
	<!-- 行政站导航 -->
	<navtab2-component v-if="sitelevel != 5 && sitelevel != '' " :siteid="site_data"></navtab2-component>
	<!-- 基层站导航 -->
	<navtab3-component v-if="sitelevel==5" :siteid="site_data"></navtab3-component>

    <subpagebanner-component :siteid="site_data" :bannerid="parameter.bannerid"></subpagebanner-component>

    <div class="content">
        <div class="article-detail">
            <div class="article-detail-l" style="width: 15rem">
                <div class="nav flex-column nav-pills" id="v-pills-tab">
					<!--<a class="nav-link" :class="{'active' : tagIndex == item.category_id }" href="javascript:;" @click="changetag(item.category_id,item.name)" v-for="(item,index) in taglist">{{ item.name }}</a>-->
					<router-link :to="{ path : '/list' ,query:{id: item.category_id,tag:parameter.tag,name:item.name }}"
                                 @click.native="changetag(item.category_id,item.name,item.image)"  tag="a"
                                 v-for="(item,index) in taglist" class="nav-link" :key="item.category_id"
                                 :class="{'active' : tagIndex == item.category_id }">{{ item.name }}
                    </router-link>
                </div>
            </div>
            <div class="tab-content" id="v-pills-tabContent">
				<router-view :defaulttag="txt" :defaultid="tagIndex" :icon="icon" v-if="txt" :isfivesite="isfivesite"></router-view>
            </div>
        </div>
    </div>

    <footer-component></footer-component>
</main>

<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>
<script>
    //parameter
    var site = parameter.siteid ? { id : parseInt(parameter.siteid) , name : parseInt(parameter.sitename) } : ( JSON.parse(window.localStorage.getItem("station")) || {} );
    var hash =  window.location.hash.substring(1);
</script>

<script>
	const routes = [
		{ path: '/', component: articlelist},
		{ path: '/list', component: articlelist},
		{ path: '/detail', component: articledetail},
	];
	const router = new VueRouter({
		routes
	});
    var survey = new Vue({
        el:"#survey",
		router,
        data    : {
            parameter : parameter,
            token     : getCookie("token") ,       // 用户token
            user_id   : getCookie("user_id") ,   // 用户id
            site_data :site,
			type:'',	// 修改
			taglist:[],
			tagIndex:0,
			articleList:[],
			total     : 1 ,
			limit     : 10 ,
			page      : 1 ,
			txt:'',
			activeId:'',
			tag:'',
			icon:'',
			sitelevel:'',
			isfivesite:false
        },
		watch:{
			'$route':function () {
				this.tagIndex = this.$route.query.id
				this.txt = this.$route.query.name
			}
		},
		created(){
			this.tagIndex=this.$route.query.id;
		},
        mounted(){
            var _th = this;
            if (localStorage.getItem('station')){
            	this.sitelevel = JSON.parse(localStorage.getItem('station')).site_level
			}

            //获取分类
            // let type_id = GetQueryString('tag');
            let type_id = parameter.tag;
            this.tag = GetQueryString('tag');

            switch (parameter.tag) {
				case 'jiayuan':
					this.type = 25;
					this.isfivesite = false;
					break;
				case 'fazhi':
					this.type = 30;
					this.isfivesite = false;
					break;
				case 'gongyi':
					this.type = 36;
					this.isfivesite = false;
					break;
				case 'paotui':
					this.type = 53;
					this.isfivesite = true;
					break;
			}
			this.getClassList();
		} ,
        methods : {
            getClassList(){
            	if (this.isfivesite){

					axios.post(sysurl + 'index/articleCategory',{ type:this.type , site_id : this.site_data.site_id || 0 }).then(res=>{

						this.taglist = res.data.data;
                        if(res.data.data.length){
                            if( !this.tagIndex ){
                                this.tagIndex = res.data.data[ 0 ].category_id;
                            }
                            if( this.parameter.id ){
                                res.data.data.map(( item , index ) => {
                                    if( item.category_id == this.parameter.id ){
                                        this.icon = item.image;
                                        this.txt  = item.name;
                                    }
                                })
                            }else{
                                this.txt  = res.data.data[ 0 ].name;
                                this.icon = res.data.data[ 0 ].image;
                            }
                            this.getRightList(this.tagIndex);
                        }
					})

				} else{

					axios.post(sysurl + 'index/articleCategory',{ type:this.type,site_id : this.site_data.site_id || 0 }).then(res=>{
						this.taglist = res.data.data;
						if(res.data.data.length){
                            if (!this.tagIndex){
                                this.tagIndex = res.data.data[0].category_id;
                            }
                            if(this.parameter.id){
                                res.data.data.map((item,index) => {
                                    if(item.category_id == this.parameter.id){
                                        this.icon = item.image;
                                        this.txt = item.name;
                                    }
                                })
                            }else{
                                this.txt = res.data.data[0].name;
                                this.icon = res.data.data[0].image;
                            }
                            this.getRightList(this.tagIndex);
                        }

					})

				}
            },
			changetag(id,name,icon){
				this.tagIndex = id;
				this.activeId = id;
				this.page = 1;
				this.total = 1;
				this.txt = name;
				this.icon = icon
			},
			// 获取右侧列表
			getRightList(id,page){
				if (this.isfivesite){
            		var siteid = JSON.parse(localStorage.getItem('station')).site_id;
					axios.post(sysurl+'article/areaArticleList',{site_id:siteid,category_id:id,page:this.page,limit:this.limit}).then(res=>{
						this.articleList = res.data.data.data;
					})
				} else{
					axios.post(sysurl+'index/articleList',{category_id:id,page:this.page,limit:this.limit}).then(res=>{
						this.articleList = res.data.data.data;
					})
				}
			},
			togglePage(page){
				this.page = page;
				this.getRightList(this.activeId,this.page)
			}
        } ,
        filters : {} ,
    })
</script>
</body>
</html>
